{extend name="public/layer_base"}
{block name="main"}
<style>
    input[type="text"] {
        width: 100%;
    }
</style>
<div class="layui-body layui-tab-content site-demo site-demo-body">
    <div class="layui-tab-item layui-show">
        <div class="layui-main">
            <div id="LAY_preview">
                {eq name="type" value=""}
                <button class="layui-btn layui-btn-mini add_param" data-api-id="{$id}">添加参数</button>
                {/eq}
                <table class="layui-table" lay-even="" lay-skin="nob" id="data_list">
                    <thead>
                    <tr>
                        <th width="15%">参数名</th>
                        <th width="10%">字段类型</th>
                        <th width="10%">示例</th>
                        <th width="50%">说明</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    {volist name="data" id="vo"}
                    <tr>
                        <td>{$vo.key}</td>
                        <td>{$vo.type}</td>
                        <td>{$vo.example}</td>
                        <td>{$vo.msg}</td>
                        <td>
                            <button class="layui-btn layui-btn-mini update" data-api-id="{$id}" data-api-param-id="{$vo.id}">编辑</button>
                            <button class="layui-btn layui-btn-mini delete" data-api-id="{$id}" data-api-param-id="{$vo.id}">删除</button>
                        </td>
                    </tr>
                    {/volist}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
{/block}

{block name="javascript"}
<script>
    layui.use(['laypage', 'layer', 'form'], function() {
        var $ = layui.jquery, form = layui.form()
                , layer = layui.layer;

        $(".add_param").click(function () {
            var api_id = $(this).data('api-id');
            var html = '<tr>' +
                    '<td><input type="text" name="key" /> </td>' +
                    '<td><input type="text" name="type" />  </td>' +
                    '<td><input type="text" name="example" /></td>' +
                    '<td><input type="text" name="msg" /></td>' +
                    '<td>' +
                    '<button class="layui-btn layui-btn-mini save" data-api-id="'+ api_id +'" data-api-param-id="0">保存</button>' +
                    '</td>' +
                    '</tr>';
            $('tbody').append(html);
        });

        $(document).on('click', '.save', function () {
            var _this = $(this);
            var key = _this.parents('tr').find('input[name="key"]').val();
            var type = _this.parents('tr').find('input[name="type"]').val();
            var example = _this.parents('tr').find('input[name="example"]').val();
            var p_msg = _this.parents('tr').find('input[name="msg"]').val();
            var api_id = _this.data('api-id');
            $.ajax({
                type : 'POST',
                url : '{:url("save_api_param")}',
                data : {
                    'key' : key,
                    'type' : type,
                    'example' : example,
                    'msg' : p_msg,
                    'api_id' : api_id,
                    'id' : _this.data('api-param-id')
                },
                dataType : 'json',
                success : function (msg) {
                    if (msg.code == 200) {
                        layer.alert('提交成功', {icon: 1});
                        _this.parents('tr').find('td').eq(0).html(key);
                        _this.parents('tr').find('td').eq(1).html(type);
                        _this.parents('tr').find('td').eq(2).html(example);
                        _this.parents('tr').find('td').eq(3).html(p_msg);
                        _this.parents('tr').find('td').eq(4).html(
                                '<button class="layui-btn layui-btn-mini update" data-api-id="'+api_id+'" data-api-param-id="'+msg.id+'">编辑</button>'+
                                '<button class="layui-btn layui-btn-mini delete" data-api-id="'+api_id+'" data-api-param-id="'+msg.id+'">删除</button>');
                    } else {
                        layer.alert('提交失败', {icon: 2});
                    }
                }
            });
        });

        $(document).on('click', '.update', function () {
            var _this = $(this);
            var api_id = _this.data('api-id'),  api_param_id = _this.data('api-param-id');
            var key = _this.parents('tr').find('td').eq(0).html();
            var type = _this.parents('tr').find('td').eq(1).html();
            var example = _this.parents('tr').find('td').eq(2).html();
            var p_msg = _this.parents('tr').find('td').eq(3).html();

            _this.parents('tr').find('td').eq(0).html('<input type="text" name="key" value="'+key+'" />');
            _this.parents('tr').find('td').eq(1).html('<input type="text" name="type" value="'+type+'" />');
            _this.parents('tr').find('td').eq(2).html('<input type="text" name="example" value="'+example+'" />');
            _this.parents('tr').find('td').eq(3).html('<input type="text" name="msg" value="'+p_msg+'" />');
            _this.parents('tr').find('td').eq(4).html('<button class="layui-btn layui-btn-mini save" data-api-id="'+ api_id +'" data-api-param-id="'+api_param_id+'">保存</button>');
        });

        $(document).on('click', '.delete', function () {
            var _this = $(this);
            layer.confirm('确定删除?', {icon: 3, title:'提示'}, function(index){
                var id = _this.data('api-param-id');
                $.get("{:url('delete_data')}", {id : id, model : 'api_param'}, function (msg) {
                    if (msg.code == 200) {
                        layer.alert('删除成功', {icon: 1}, function (index) {
                            _this.parents('tr').slideUp().remove();
                            layer.close(index);
                        });
                    } else {
                        layer.alert(msg.msg, {icon: 2});
                    }
                });
            });
        });
    });
</script>
{/block}